<template>
  <div class="cart-page">
    <h1 class="page-title">购物车</h1>
    <div v-if="cartItems.length === 0" class="empty-cart">
      <img src="https://picsum.photos/400/200?tag=empty" alt="空购物车" class="empty-img">
      <p>购物车为空，快去挑选商品吧！</p>
    </div>
    <div v-else class="cart-container">
      <!-- 购物车商品列表 -->
      <div class="cart-items">
        <div v-for="item in cartItems" :key="item.id" class="cart-item">
          <img :src="item.image" alt="商品图片" class="item-img">
          <div class="item-info">
            <h3 class="item-name">{{ item.name }}</h3>
            <p class="item-price">单价：￥{{ item.price }}</p>
            <div class="quantity-control">
              <span>数量：</span>
              <button 
                @click="decreaseQuantity(item)" 
                class="btn-quantity" 
                :disabled="item.quantity === 1"
              >-</button>
              <span class="quantity">{{ item.quantity }}</span>
              <button 
                @click="increaseQuantity(item)" 
                class="btn-quantity"
              >+</button>
            </div>
          </div>
          <button @click="removeItem(item.id)" class="btn-remove">删除</button>
        </div>
      </div>
      <!-- 结算信息 -->
      <div class="summary">
        <div class="summary-row">
          <span>商品总价：</span>
          <span class="total-price">￥{{ totalPrice }}</span>
        </div>
        <div class="summary-row coupon-row">
          <span>可用优惠券：</span>
          <span>3张</span>
          <button class="btn-apply">使用优惠券</button>
        </div>
        <button @click="goToCheckout" class="btn-checkout">
          去结算 (<span class="item-count">{{ totalQuantity }}</span>件)
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

// 模拟购物车数据（使用网络图片）
const cartItems = ref([
  {
    id: 1001,
    name: '无线蓝牙降噪耳机',
    price: 499.00,
    quantity: 1,
    image: 'https://picsum.photos/200/200?tag=headphones&random=1'
  },
  {
    id: 1002,
    name: '纯棉长袖T恤',
    price: 149.00,
    quantity: 2,
    image: 'https://picsum.photos/200/200?tag=t-shirt&random=2'
  },
  {
    id: 1003,
    name: '智能运动手表',
    price: 1299.00,
    quantity: 1,
    image: 'https://picsum.photos/200/200?tag=watch&random=3'
  }
])

// 计算总数量
const totalQuantity = computed(() => 
  cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
)

// 计算总价
const totalPrice = computed(() => 
  cartItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2)
)

// 减少数量
const decreaseQuantity = (item) => {
  if (item.quantity > 1) {
    item.quantity--
  }
}

// 增加数量
const increaseQuantity = (item) => {
  item.quantity++
}

// 删除商品
const removeItem = (id) => {
  cartItems.value = cartItems.value.filter(item => item.id !== id)
}

// 初始化路由
const router = useRouter()

// 去结算（带路由跳转）
const goToCheckout = () => {
  if (cartItems.value.length === 0) {
    alert('购物车为空，无法结算！')
    return
  }
  // 跳转到结算页（需在路由中配置/checkout路径）
  router.push({
    path: '/checkout',
    query: { total: totalPrice.value, count: totalQuantity.value }
  })
  // 清空购物车示例（实际需根据业务逻辑处理）
  // cartItems.value = []
}
</script>

<style scoped>
.cart-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}

.page-title {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 30px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

.empty-cart {
  text-align: center;
  padding: 80px 20px;
  color: #7f8c8d;
}

.empty-img {
  max-width: 300px;
  margin: 0 auto 20px;
  opacity: 0.7;
}

.cart-container {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 25px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #f5f5f5;
}

.item-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.item-info {
  flex: 1;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
}

.item-name {
  font-size: 18px;
  color: #34495e;
  margin-bottom: 8px;
}

.item-price {
  font-size: 16px;
  color: #e74c3c;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-quantity {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-quantity:hover {
  background: #f8f8f8;
}

.btn-quantity:disabled {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
}

.quantity {
  width: 50px;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.btn-remove {
  background: #ff4444;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-remove:hover {
  opacity: 0.9;
}

.summary {
  margin-top: 30px;
  padding: 25px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 16px;
  color: #555;
}

.total-price {
  font-size: 24px;
  color: #e74c3c;
  font-weight: 500;
}

.coupon-row {
  border-top: 1px solid #e0e0e0;
  margin-top: 15px;
  padding-top: 15px;
}

.btn-apply {
  background: #3498db;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-checkout {
  width: 100%;
  padding: 14px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 20px;
  transition: transform 0.2s;
}

.btn-checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.2);
}

.item-count {
  font-size: 0.9em;
  color: #7f8c8d;
  margin-left: 8px;
}

@media (max-width: 768px) {
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
  }

  .item-img {
    width: 100px;
    height: 100px;
  }

  .item-info {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .quantity-control {
    margin-top: 10px;
  }
}
</style>